Googleドキュメント + S3で簡易CMSを実現する

コンテンツ管理といえば最近はCMSを使ったりして、非エンジニアでも編集可能なUIを提供し、APIを通してコンテンツを利用するようなことが多いと思います。今回はコンテンツの編集をGoogleドキュメントで行い、S3に置くことで簡易なCMSとして使用することを考えてみます。

#Google Apps Script

#Google Docs

#Amazon S3

#Amazon CloudFront

#CMS

maroKanatani

2021.07.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

コンテンツ管理といえば最近はCMSを使ったりして、非エンジニアでも編集可能なUIを提供し、APIを通してコンテンツを利用するようなことが多いと思います。

今回はコンテンツの編集をGoogleドキュメントで行い、S3に置くことで簡易なCMSとして使用することを考えてみます。

Googleアカウントを持っていたりする場合はGoogleドキュメントを使用することで、新しくCMSを導入することによるアカウント管理や認証等が不要になります。

なおAWS側で以下の用意ができていることを前提とします。

S3バケット
S3バケットへのアクセスキー

Googleドキュメントを用意する

まずはGoogleドキュメントを用意しましょう。

用意できたらツール > スクリプトエディタを開きます。

GASを書いていく

GASからS3を利用するためにS3-for-Google-Apps-Scriptというライブラリを使用します。

新エディタを使用している場合は、ライブラリの＋ボタンを押下して以下のスクリプトIDを入力してライブラリを追加します。

1Qx-smYQLJ2B6ae7Pncbf_8QdFaNm0f-br4pbDg0DXsJ9mZJPdFcIEkw_

（旧エディタではProject Keyを利用してライブラリを追加していましたが、新エディタではスクリプトIDしか利用できなくなっていて戸惑いました。ちなみにProject KeyはMB4837UymyETXyn8cv3fNXZc9ncYTrHL9）

ライブラリが追加できたら以下のコードを書いていきます。

const accessKey = "XXXXXXXXX"; // アクセスキー
const secretKey = "XXXXXXXXX"; // シークレットキー
const bucketName = "XXXXXXXX"; // S3バケット名
const filePath = "XXXXXXX.html"; // ファイル名

function exportAsHtml() {
  const document = DocumentApp.getActiveDocument();
  const fileId = document.getId();

  const url = `https://docs.google.com/feeds/download/documents/export/Export?id=${fileId}&exportFormat=html`;

  const params = { 
    method: "get",
    headers: {'Authorization': 'Bearer ' + ScriptApp.getOAuthToken()}, 
  }
  const html = UrlFetchApp.fetch(url, params).getContentText();

  const blob = Utilities.newBlob(html, 'text/html');
  const s3 = S3.getInstance(accessKey, secretKey);
  const response  = s3.putObject(bucketName, filePath, blob, {logRequests: true});
}

Googleドキュメントのデータを保存する際に、GoogleドキュメントのBodyクラスからHTMLやMarkdown等の一般的なデータ形式に変換してくれるAPIがあったりしないかなーと思っていたのですが、調べた感じだとなさそうでした。

ということでGoogleドキュメントのExport機能のURLを叩くという方法を取っています。

MarkdownでExportできなさそうだったので今回はHTMLでExportしています。

これを実行するとS3にHTMLが保存されます。